<template>
  <div class="setwrap">
    <div class="titlecommon">农资管理</div>
    <div class="panelben">
      <div class="titlecommon2">
        <span> 农资管理 </span>
      </div>
      <div class="tab">
        <div
          @click="activeIndex = index"
          :class="[activeIndex == index ? 'tabchildActive' : '', 'tabchild']"
          v-for="(item, index) in menu"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
      <div class="btntwo" v-if="activeIndex==0">
        <div class="btn btn2" @click="addOne">
          <el-icon><Plus /></el-icon>
          <span class="text"> 新增 </span>
        </div>
        <div class="btn btn2 btn3" @click="addMoreHandle">
          <el-icon><Plus /></el-icon>
          <span class="text"> 批量新增 </span>
        </div>
      </div>
      <div class="chooseDiy">
        <div class="left" v-if="activeIndex == 0">
          <div class="one">
            <span>农资类型:</span>
            <el-select
              v-model="searchForm.value.farmResourceCategoryId"
              class="m-2"
              @change="categoryChange"
              placeholder="按农资类型筛选"
              size="large"
            >
              <el-option
                v-for="(item) in farmResourceOptionList.value"
                :key="item.id"
                :label="item.categoryName"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="one">
            <span>农资名称:</span>
            <el-select
              v-model="searchForm.value.farmResourceId"
              class="m-2"
              placeholder="按农资名称筛选"
              size="large"
            >
              <el-option
                v-for="item in farmResourceNameOptionList.value"
                :key="item.id"
                :label="item.farmResourceName"
                :value="item.id"
              />
            </el-select>
          </div>
        </div>
        <div class="left" v-else>
          <div class="one">
            <span>地块名称:</span>
            <el-select
              v-model="searchForm2.value.plotId"
              class="m-2"
              placeholder="按地块名称筛选"
              size="large"
            >
              <el-option
                v-for="(item) in plotOptionList.value"
                :key="item.id"
                :label="item.plotName"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="one">
            <span>农资类型:</span>
            <el-select
              v-model="searchForm2.value.farmResourceCategoryId"
              class="m-2"
              placeholder="按农资类型筛选"
              @change="categoryChange2"
              size="large"
            >
              <el-option
                v-for="item in farmResourceOptionList.value"
                :key="item.id"
                :label="item.categoryName"
                :value="item.id"
              />
            </el-select>
          </div>
          
          <div class="one">
            <span>农资名称:</span>
            <el-select
              v-model="searchForm2.value.farmResourceId"
              class="m-2"
              placeholder="按农资名称筛选"
              size="large"
            >
              <el-option
                v-for="item in farmResourceNameOptionList2.value"
                :key="item.id"
                :label="item.farmResourceName"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="one">
            <span>选择时间:</span>
            <el-date-picker
              v-model="searchForm2.value.dateTime"
              type="date"
              placeholder="2023-5-4"
              size="large"
            />
          </div>
        </div>
        <div class="right">
          <div class="btn3 btn7" @click="searchHandle()">
            <el-icon style="vertical-align: middle">
              <Search />
            </el-icon>
            查询
          </div>
          <div class="btn3 btn7 btn4" @click="reSet()">
            <el-icon><Refresh /></el-icon>
            重置
          </div>
        </div>
      </div>

      <div class="table">
        <el-table
          v-if="activeIndex == 0"
          :data="tableData.value"
          style="width: 100%"
        >
          <el-table-column prop="categoryName" label="农资类型" />
          <el-table-column prop="farmResourceName" label="农资名称" />
          <el-table-column prop="licenseNumber" label="许可证编号" />
          <el-table-column prop="element" label="主要成分" />
          <el-table-column prop="spec" label="规格" />
          <el-table-column prop="unitPrice" label="单价(元)" />
          <el-table-column prop="createName" label="添加人员" />
          <el-table-column label="操作">
            <template #default="scope">
              <div class="btnwrap">
                <div class="btntext" @click="openEdit(scope.row)">编辑</div>
                <div class="btntext delete" @click="delOne(scope.row)">
                  删除
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-else :data="tableData2.value" style="width: 100%">
          <el-table-column prop="createTime" label="使用时间" />
          <el-table-column prop="categoryName" label="农资类型" />
          <el-table-column prop="farmResourceName" label="农资名称" />
          <el-table-column prop="gardenName" label="使用地块" />
          <el-table-column prop="nickName" label="使用人员" />
          <el-table-column prop="dosage" label="用量(KG)" />
          <el-table-column prop="price" label="花费(元)" />
          
        </el-table>
      </div>
      <div class="fy" v-if="activeIndex==0">
        <div class="total flexcenter">共 <span>{{ total }}</span>项数据</div>
        <el-pagination background layout="prev, pager, next" :total="total"
          :currentPage="pageInfo.pageNum"
          @current-change="currentChange"
        />
      </div>
      <div class="fy" v-else>
        <div class="total flexcenter">共 <span>{{ total2 }}</span>项数据</div>
        <el-pagination background layout="prev, pager, next" :total="total2"
          :currentPage="pageInfo2.pageNum"
          @current-change="currentChange2"
        />
      </div>
      <div v-if="activeIndex==1" class="cost">消耗总金额(元): <span>{{ getCostTotal }}</span></div>
    </div>
    <add v-if="addFlag" @getList="getList" ref="add"/>
    <add-more v-if="addMoreFlag" @refreshList="getListTwo" ref="addMore" :type="type" />
  </div>
</template>

<script lang="ts">
import bus from '@/utils/bus'
import { defineComponent, ref, reactive, onMounted, onUnmounted } from "vue";
import add from "./add.vue";
import { post, get,deletePost } from "@/public/request/api";
import { ElMessageBox, ElMessage } from "element-plus";
import addMore from "../plantingType/modal/addMore.vue";
import storage from "@/store";
export default defineComponent({
  components: {
    add,
    addMore,
  },
  setup() {
    //变量
    const userRole = storage.state.userRole;
    let addFlag=ref(false)
    let addMoreFlag=ref(false)
    let type=ref('')
    let total=ref(0)
    let total2=ref(0)
    let getCostTotal=ref(0)
    let activeIndex = ref(0);
    let searchForm = reactive({
      value: {
        farmResourceId: "",
        farmResourceCategoryId: "",
      },
    });
    let searchForm2 = reactive({
      value: {
        plotId: "",
        farmResourceId: "",
        dateTime: "",
        farmResourceCategoryId:'',
        beginDateTime:'',
        endDateTime:'',
        baseId:'',
      },
    });
    const menu = ["农资信息", "农资使用记录"];
    let plotOptionList = reactive({
      value: [],
    });
    let farmResourceOptionList = reactive({
      value: [],
    });
    let  farmResourceNameOptionList=reactive({
      value:[]
    })
    let farmResourceNameOptionList2=reactive({
      value:[]
    })
    let pageInfo = reactive({
      pageSize: 10,
      pageNum: 1,
    });
    let pageInfo2 = reactive({
      pageSize: 10,
      pageNum: 1,
    });
    const date = ref("");
    const value = ref("");
    const options = [
      {
        value: "1",
        label: "地块01",
      },
    ];
    const tableData = reactive({
      value: [
        
      ],
    });
    const tableData2 = reactive({
      value: [
        {
          name: "2023-06-01",
          jd: "种子",
          wd: "玉米富尔116",
          lwmc: "地块1",
          man: "张三",
          price: "￥10",
          num: "20",
          totalprice: "￥200",
        },
        {
          name: "2023-06-01",
          jd: "种子",
          wd: "玉米富尔116",
          lwmc: "地块1",
          man: "张三",
          price: "￥10",
          num: "20",
          totalprice: "￥200",
        },
        {
          name: "2023-06-02",
          jd: "化肥",
          wd: "金坷垃",
          lwmc: "地块1",
          man: "张三",
          price: "￥120",
          num: "10",
          totalprice: "￥1200",
        },
        {
          name: "2023-06-02",
          jd: "化肥",
          wd: "金坷垃",
          lwmc: "地块1",
          man: "张三",
          price: "￥120",
          num: "10",
          totalprice: "￥1200",
        },
      ],
    });

    // 生命周期
    onMounted(() => {
      mapInit()
    });
    bus.on('changeBase', mapInit);
    function mapInit(){
      console.log('切换基地了！！')
      getList();
      getPlotOptionsList();
      getfarmResourceOptionsList();
      getInfoList()
    }
    onUnmounted(() => {
      //
    });

    //methods

    function getfarmResourceOptionsList() {
      get("/farmResource/category/options", {}).then((res) => {
        farmResourceOptionList.value = res.data;
        //searchForm.value.farmResourceId=res.data[0]['id']
      });
    }
    function getPlotOptionsList() {
      get("/plot/options", {
        isExclude:1
      }).then((res) => {
        plotOptionList.value = res.data;
        //searchForm.value.plotId=res.data[0]['id']
      });
    }
    function addOne() {
      addFlag.value=true
      setTimeout(() => {
        this.$refs.add.dialogVisible = true;
        this.$refs.add.editFlag = false;  
      }, 150);
    }
    
    function openEdit(row) {
      addFlag.value=true
      setTimeout(() => {
        this.$refs.add.dialogVisible = true;
        this.$refs.add.editFlag = true;
        this.$refs.add.init(row)
      }, 150);
      
    }
    function addMoreHandle() {
      addMoreFlag.value=true
      if(activeIndex.value==0){
        type.value='farmSourceType'
      }
      setTimeout(() => {
        console.log('type.value',type.value);
        
        this.$refs.addMore.dialogVisible = true;  
      }, 150);
    }
    function getInfoList() {
      get('/farmResource/usageRecord',{
          pageNum:pageInfo2.pageNum,
          pageSize:pageInfo2.pageSize,
          plotId:searchForm2.value.plotId,
          farResourceId: searchForm2.value.farmResourceId,
          farmResourceCategoryId:searchForm2.value.farmResourceCategoryId,
          beginDateTime:searchForm2.value.beginDateTime,
          endDateTime:searchForm2.value.endDateTime,
          baseId:1

      }).then(res=>{
          tableData2.value=res.pageInfo.list
          total2.value=res.pageInfo.total
          getCostTotal.value=res.pageInfo.navigatePages
      })
    }
    function getList() {
      get("/farmResource/page", {
        pageNum: pageInfo.pageNum,
        pageSize: pageInfo.pageSize,
        farmResourceId: searchForm.value.farmResourceId,
        farmResourceCategoryId: searchForm.value.farmResourceCategoryId,
        //dateTime:searchForm.value.dateTime,
      }).then((res) => {
        tableData.value=res.pageInfo.list
        total.value=res.pageInfo.total
      });
    }
    
    function searchHandle(){
      if(activeIndex.value==0){
        getList()
      }else{
        getInfoList()
      }
    }
    function currentChange(e){
      pageInfo.pageNum=e
      getList()
    }
    function currentChange2(e){
      pageInfo2.pageNum=e
      getInfoList()
    }
    function categoryChange2(e){
      getNameByCateGory2(e)
      searchForm2.value.farmResourceId=''
    }
    function categoryChange(e){
      getNameByCateGory(e)
      searchForm.value.farmResourceId=''
    }
    function getNameByCateGory2(e){
      
      get("/farmResource/options", {
        farmResourceCategoryId:e
      }).then((res) => {
        farmResourceNameOptionList2.value=res.data
      });
    }
    function getNameByCateGory(e){
      
      get("/farmResource/options", {
        farmResourceCategoryId:e
      }).then((res) => {
        farmResourceNameOptionList.value=res.data
      });
    }
    function delHandel(id){
      deletePost("/farmResource/del", {
        id
      }).then((res) => {
        ElMessage({
            message: "删除成功",
            type: "success",
        });
        getList()
      });
       
    }
    function delOne(row) {
      ElMessageBox.confirm("确认删除?")
        .then(() => {
          console.log(row)
          delHandel(row.id)
          
        })
        .catch(() => {
          // catch error
        });
    }
    function reSet(){
      if(activeIndex.value==0){
        searchForm.value={
          farmResourceId: "",
          farmResourceCategoryId: "",
        }
        getList()
      }else{
        searchForm2.value={
          plotId: "",
          farmResourceId: "",
          dateTime: "",
          farmResourceCategoryId:'',
          beginDateTime:'',
          endDateTime:'',
          baseId:'',
        }
        getInfoList()
      }
    }
    function getListTwo(){
      if(activeIndex.value==0){
        getList()
      }else{
        getInfoList()
      }
    }
    // return
    return {
      getCostTotal,
      total2,
      pageInfo2,
      addMoreFlag,
      getListTwo,
      type,
      farmResourceNameOptionList2,
      categoryChange2,
      reSet,
      getList,
      addFlag,
      farmResourceNameOptionList,
      categoryChange,
      total,
      currentChange,
      currentChange2,
      searchHandle,
      delOne,
      openEdit,
      searchForm2,
      farmResourceOptionList,
      searchForm,
      plotOptionList,
      pageInfo,
      menu,
      activeIndex,
      tableData,
      tableData2,
      value,
      options,
      date,
      addOne,
      addMoreHandle,
      userRole,
    };
  },
});
</script>

<style lang="scss">
.setwrap {
  .el-table th.el-table__cell,
  .el-table .el-table__cell,
  .el-table tr,
  .el-table--fit {
    background: transparent !important;
    color: #fff !important;
  }
  .el-table th.el-table__cell.is-leaf,
  .el-table td.el-table__cell {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .el-pagination.is-background .el-pager li {
    background: transparent !important;
    color: #fff !important;
  }
  .el-pagination.is-background .btn-next {
    background: none !important;
  }
  .btn-prev {
    background: none !important;
  }
  .el-input__wrapper {
    background: rgba(255, 255, 255, 0.08) !important;
    width: 200px;
    border-radius: 200px;
    border: none !important;
    box-shadow: none;
  }
}
</style>
<style lang="scss" scoped>
@import "@/assets/scss/index.scss";
.setwrap {
  .btn3 {
    width: 100px !important;
    margin-left: 10px;
  }
  .btn7 {
    width: 77px !important;
  }
  .cost {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    font-size: 20px;
    span {
      font-weight: bold;
      font-size: 25px;
      margin-left: 10px;
    }
  }
  .fy {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .total {
      color: rgba(255, 255, 255, 0.6);
      font-size: 10px;
      span {
        font-size: 20px;
      }
    }
  }
  .table {
    margin-top: 20px;
  }
  .btnwrap {
    display: flex;
    align-items: center;
    .btntext {
      color: rgba(49, 127, 245, 1);
      cursor: pointer;
    }
    .delete {
      color: rgba(245, 98, 98, 1) !important;
      margin-left: 15px;
    }
  }
  .titlecommon2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .btn2 {
    width: 70px;
    box-sizing: border-box;
    padding: 5px 10px !important;
    margin-top: 20px;
  }
  .btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(9, 127, 229, 1);
    font-size: 14px;
    padding: 5px 20px;
    border-radius: 5px;
    cursor: pointer;
  }
}
</style>
